<template>
  <div class="content wrapper">
        <div class="left">
            <div class="left_top">
                <img src="../assets/sanjiao.png" alt="">
                <h1>{{navT}}</h1>
            </div>
            <ul>
                <li>
                    <router-link to="/nav2nav1" active-class="current">电子资源</router-link>
                </li>
                <li>
                    <router-link to="/nav2nav2" active-class="current"> 开放资源</router-link>
                </li>
                <li>
                    <router-link to="/nav2nav3" active-class="current">   网络公开课</router-link>

                </li>
                <li>
                    <router-link to="/nav2nav4" active-class="current"> 远程控制</router-link>
                </li>
                <li>
                    <router-link to="/nav2nav5" active-class="current">  书刊捐赠</router-link>
                </li>
            </ul>
        </div>
        <div class="r1">
            <router-view></router-view>
        </div>
        
    </div>
</template>

<script>
export default {
    name:'navson',
    props:['navT'],
    components:{
    }
}
</script>

<style>
    * {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}


/* 清除li标签的圆点 */

li {
    list-style: none;
}


/* 清除超链接的下划线 */

a {
    text-decoration: none;
}


/* 清除浮动 */

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.wrapper {
    margin: 0 auto;
}

.current {
    background-color: #f1f1f1;
    color: red;
}

.content {
    width: 100%;
    height: 500px;
    margin-top: 50px;
    background-color: #ffffff;
}

.left {
    float: left;
    width: 18%;
    height: 400px;
    /* background-color: green; */
    border-right: 3px solid hsl(240, 84%, 24%);
}

.left_top img {
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    width: 40px;
    height: 20px;
}

.left_top {
    width: 200px;
    height: 70px;
    text-align: right;
    /* font-size: 18px; */
    font-family: '微软雅黑';
    padding: 10px 0 12px;
    border-bottom:solid     3px  #eaeaea;
}

.left li a {
    display: inline-block;
    width: 200px;
    height: 70px;
    font-size: 18px;
    font-family: '微软雅黑';
    color: black;
    text-align: center;
    line-height: 70px;
    /* background-color: #fff; */
}
.r1{
    width: 80%;
    float: left;
}

</style>